<template>
  <div id="index">
    <p>点击【重置】前，需输入玩家名字（以中文逗号分割），开启新一轮的游戏</p>
    <p>点击【继续】，无需输入内容，继续上轮的游戏进度</p>
    <input type="text" name="nameList" v-model="inputtext">
    <ul v-if="inputtext">
      <li v-for="(value, index) in inputtext.split('，')" v-bind:key="value">
        {{ index + 1 }}号玩家： {{ value }}
      </li>
    </ul>
    <button @click="init">重置</button>
    <button @click="jumpToIndex">继续</button>
    <router-view/>
  </div>
</template>

<script>
import Axios from '../../utils/request'

export default {
  name: 'nyn',
  data() {
    return {
      inputtext: ''
    }
  },
  methods: {
    jumpToIndex() {
      let routeData = this.$router.resolve({path: '/index'});
      window.open(routeData.href, '_blank');
    },
    async init() {
      const param = {nameList: this.inputtext}
      if (this.inputtext === ''){
        alert('输入不能为空！')
        return
      }
      try {
        // axios请求是异步的，使用await同步执行
        let x = await Axios.post('api/init', param)
        if (!x.data.success) {
          alert('出错：' + x.data.msg)
        } else {
          this.jumpToIndex()
        }
      } catch (e) {
        alert('请求异常，请重试！')
      }
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none; /* 去掉li标签前的黑点*/
}
button {
  margin: 0px 5px 0px 5px;
}
p {
  text-align: center;
  font-size: 10px;
}
input {
  margin: 3px;
  padding: 5px;
}
</style>
